<!-- 拼团提示弹窗（仅弹一次） -->
<template>
	<view class="ll-popup" v-show="value">
		<view class="ll-popup-container">
			<view class="ll-popup-title dfcc">
				<image :src="tandianTime" alt="探店时间" />
				<text>2022/9/22 18:00-18:30</text>
			</view>
			<view class="ll-popup-invite tac w1">
				再邀请
				<text>8人</text>
				即可拼团成功
			</view>

			<view class="ll-popup-remain tac w1">
				拼团剩余时间 ：
				<text>02</text>
				天
				<text>23</text>
				:
				<text>07</text>
				:
				<text>52</text>
			</view>

			<view class="ll-popup-operate dfcc">
				<image :src="weChatLogo"></image>
				<text>邀请好友拼团</text>
			</view>
		</view>
		<view class="ll-popup-close tac w1">
			<image
				:src="closeBtn"
				@click.stop="
					() => {
						value = false;
					}
				"
			></image>
		</view>
	</view>
</template>
<script>
export default {
	name: 'popup',

	data() {
		return {};
	},
	props: {
		value: {
			type: Boolean,
			default: false
		},
		list: {
			type: Array,
			default: () => {
				return [];
			}
		}
	},
	computed: {
		tandianTime() {
			return require('@/static/images/order/img_tc_time.png');
		},
		weChatLogo() {
			return require('@/static/images/order/icon_tc_wechat.png');
		},
		closeBtn() {
			return require('@/static/images/order/icon_tc_close.png');
		}
	}
};
</script>
<style lang="scss" scoped>
@import '@/style/common.scss';
.ll-popup {
	padding: 160rpx 20rpx 0;
	@include Db_iosBottomDistance(120rpx);

	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.6);

	&-container {
		width: 606rpx;
		height: 690rpx;
		margin: 0 auto;
		background-image: url('@/static/images/order/img_invitationPop_bg.png');
		background-repeat: no-repeat;
		padding: 248rpx 52rpx 48rpx;
	}
	&-title {
		margin-bottom: 50px;
		image {
			width: 120rpx;
			height: 28rpx;
			margin-right: 20rpx;
		}
		text {
			width: 328rpx;
			height: 28rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 28rpx;
		}
	}
	&-invite {
		margin-bottom: 80rpx;
		width: 382rpx;
		height: 50rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
		text {
			color: #766df7;
		}
	}

	&-remain {
		width: 144rpx;
		height: 32rpx;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #ff6b11;
		line-height: 32rpx;
		margin-bottom: 40rpx;
		text {
			width: 40rpx;
			height: 36rpx;
			background: #fdf4ef;
			border-radius: 4rpx;
			margin: 0 4rpx;
		}
	}

	&-operate {
		width: 502rpx;
		height: 84rpx;
		background: linear-gradient(311deg, #8266ff 0%, #5359ff 100%);
		border-radius: 24rpx;
		padding: 18rpx 0;
		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 16rpx;
		}
		text {
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #ffffff;
		}
	}
	&-close {
		margin-top: 32rpx;

		image {
			width: 48rpx;
			height: 48rpx;
			margin-right: 16rpx;
		}
	}
}
.dfcc {
	display: flex;
	justify-content: center;
	align-items: center;
}
.df {
	display: flex;
}
.jutc {
	justify-content: center;
}

.alic {
	align-items: center;
}

.tac {
	text-align: center;
}
.w1 {
	width: 100%;
}

.h1 {
	height: 100%;
}
</style>
